import React from 'react';
import PropTypes from 'prop-types';
import { Modal, Tabs } from 'antd';
import _ from 'lodash';
import { bindActionCreators } from 'redux';
import { actions as orgManageActions } from '@containers/asset-org-manage/reducer';
import { connect } from 'react-redux';
import SearchConfigTab from '@containers/asset-org-manage/components/search-config-tab';
import OrgAccountTab from '@containers/asset-org-manage/components/org-account-tab';
import './index.less';

const { TabPane } = Tabs;

const SearchConfigModal = props => {
  const { closeModal, activeKey, handleTabChange, searchConfigVisible } = props;

  return (
    <Modal
      maskClosable={false}
      visible={searchConfigVisible}
      title="查询设置"
      onCancel={closeModal}
      footer={null}
      className="search-config-modal"
      width="700px"
    >
      <Tabs activeKey={activeKey} onChange={handleTabChange}>
        <TabPane tab="第一步 帐号设置" key="account">
          <OrgAccountTab />
        </TabPane>
        <TabPane tab="第二步 查询条件设置" key="config">
          <SearchConfigTab />
        </TabPane>
      </Tabs>
    </Modal>
  );
};

SearchConfigModal.propTypes = {
  activeKey: PropTypes.string,
  searchConfigVisible: PropTypes.bool,
  closeModal: PropTypes.func,
  handleTabChange: PropTypes.func
};

const mapStateToProps = state => {
  return {
    activeKey: _.get(state, 'orgManage.activeKey', 'account'),
    searchConfigVisible: _.get(state, 'orgManage.searchConfigVisible', false)
  };
};

const mapDispatchToProps = dispatch => {
  return {
    ...bindActionCreators(orgManageActions, dispatch)
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(SearchConfigModal);
